You can insert images into your web pages with the XHTML code you see above in the code view. The easy way to insert an image using Dreamweaver, is to click insert on the top bar, click image, and fill in the form which pops up. Click the name of the image you want to insert and the rest of the form is filled in for you.
Play with the width and height of the image and you will see strange things! For the code you see to work, the image must be in the same folder as the document referring to it. If the image is in another folder, you must give the relative or full path name to it, but Dreamweaver does this automatically when you click the image name.
The purpose of the alt in the code is to display some text in case there is a problem with the image or it is not found. (Yes, it is a family picture). You type it in when Dreamweaver displays the form for alternate text after you have chosen your image.
Please note that the XHTML image element above contains a start tag, i.e. <img> but no end tag. It ends simply with the />. Such an element is called an empty element, because it does not contain any text. We can also end the image element with </img> but this is not customary.
We may use an image as a link to another web page. This looks very nice and gives the user of your web page an easy graphical way to navigate your web site. This is done by nesting the image element as a link anchor inside the anchor element as done here. Look at the code view for the details of this.
Tables are an essential tool to organize data into rows and columns. Here is a simple table
| Bank | Rate |
|---|---|
| Lowest Rate | 5.25% |
| Wachovia | 5.25% |
| Bankers Trust | 5.75% |
| 1st Bank | 4.75% |
| Citibank | 6.00% |
The <table> tag defines a table. The border attribute sets the size of the border in pixels; the width attribute sets the width of the table as a percentage of the browser window's width.
Text inside the <caption> tag appears above the table. Every table contains 3 sections, head, body, and foot.
The <thead> tag defines the table header, e,g, column names. The <tr> tag defines a table row (including the header). The <th> tag defines an individual cell in the header.
The <tfoot> tag defines the table footer, e,g, totals, summaries, etc. The tags are the same ones used for the header. The footer appears at the bottom of the table, but the tfoot element must be placed in the XHTML code after the thead element and before the tbody element. (the terms tag and element are used here interchangeably with < > surrounding the tag, as in the XHTML code.
The <tbody> tag defines the body of the table, with a <td> tag to define each cell.
Here is an example of a more complex table, which uses rowspan and colspan attributes of the <th> tag to specify the number of rows or columns ocuppied by a cell. In this table, the <th rowspan = "2"> tag forces the cell containing the picture of the house to span two rows. The <th colspan = "4"> tag forces the cell containing the "Loan Comparison" and "Bank" title to span 4 columns.
|
Loan ComparisonBank |
|||
|---|---|---|---|---|
| Wachovia | Bankers Trust | 1st Bank | Citibank | |
| Rate | 5.25% | 5.75% | 4.75% | 6.00% |
| Term | 15 | 30 | 15 | 30 |
OK, this is long enough - lets go to Part 5 to learn about forms
Click here for part 5